<div class="bd-content">
<h1 class="bd-title" id="content">阴影</h1>
          <p class="bd-lead">使用 box-shadow 工具为元素添加或删除阴影。</p>
          <h2 id="examples">实例</h2>

<p>虽然在 Bootstrap 中默认禁用组件上的阴影，但可以通过启用 <code class="highlighter-rouge">$enable-shadows</code>，你也可以用我们的快速添加或删除阴影 <code class="highlighter-rouge">box-shadow</code> 工具类。 包括支持 <code class="highlighter-rouge">.shadow-none</code> 等三种不同预设的阴影效果(可通过变量调整)。</p>

<div class="bd-example">
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"shadow-none p-3 mb-5 bg-light rounded"</span><span class="nt">&gt;</span>No shadow<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"shadow-sm p-3 mb-5 bg-white rounded"</span><span class="nt">&gt;</span>Small shadow<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">&gt;</span>Regular shadow<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">&gt;</span>Larger shadow<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</div>